<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="${pageContext.request.contextPath}/css/main.css"
	rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.6.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.easyui.min.js"></script>

<title>会议室配置</title>
</head>

<script type="text/javascript">
	$(function() {
		$('#meetingConfigDateGrid').datagrid({
			url : '${pageContext.request.contextPath}/RoomController/queryRoomList',
			striped : true,
			singleSelect : true,
			toolbar : '#toolbar',
			fitColumns : true,
			columns : [ [ {
				field : 'id',
				title : '编号',
				width : '100px'
			}, {
				field : 'roomName',
				title : '会议室名称',
				width : '125px'
			}, {
				field : 'roomFloor',
				title : '楼层',
				width : '80px'
			}, {
				field : 'roomSize',
				title : '会议室大小',
				width : '125px'
			}, {
				field : 'roomDes',
				title : '描述',
				width : '229px'
			}, {
				field : 'usable',
				title : '状态',
				width : '40px',
				formatter : function(value, row, index) {
					var str = '';
					if (value == 0) {
						str += '<img src="${pageContext.request.contextPath}/css/themes/icons/ok.png" />';
					} else {
						str += '<img src="${pageContext.request.contextPath}/css/themes/icons/no.png"/>';
					}
					return str;

				}
			} ] ]
		});
		$('#usableComb')
				.combobox(
						{
							formatter : function(row) {
								if (row.usable == 0) {
									return '<img class="item-img" src="${pageContext.request.contextPath}/css/themes/icons/ok.png"/><span class="item-text">正常</span>'
								} else {
									return '<img class="item-img" src="${pageContext.request.contextPath}/css/themes/icons/no.png"/><span class="item-text">停用</span>'
								}
							}
						});

	})

	var url;
	function newMeetingRoom() {
		$('#aeddialog').dialog('open').dialog('setTitle', '新增会议室');
		$('#fm').form('clear');
		url = '${pageContext.request.contextPath}/RoomController/addRoom';
	}
	function editMeetingRoom() {
		var row = $('#meetingConfigDateGrid').datagrid('getSelected');
		if (row) {
			$('#aeddialog').dialog('open').dialog('setTitle', '修改会议室');
			$('#fm').form('load', row);
			url = '${pageContext.request.contextPath}/RoomController/editRoom?id=' + row.id;
		} else {
			$.messager.show({
				title : '提示',
				msg : '请选择会议室。',
				timeout : 2000
			});

		}
	}
	function saveMeetingRoom() {
		$('#fm').form('submit', {
			url : url,
			onSubmit : function() {
				return $(this).form('validate');
			},
			success : function(result) {
				var result = eval('(' + result + ')');
				if (result.errorMsg) {
					$.messager.show({
						title : 'Error',
						msg : result.errorMsg
					});
				} else {
					$('#aeddialog').dialog('close'); // close the dialog
					$('#meetingConfigDateGrid').datagrid('reload'); // reload the user data
				}
			}
		});
	}
	function destroyMeetingRoom() {
		var row = $('#meetingConfigDateGrid').datagrid('getSelected');
		console.info(row.usable);
		if (row.usable == 1) {
			parent.$.messager.show({
				title : '提示',
				msg : '当前会议室已经禁用!',
				timeout : 2000
			});
		} else {

			if (row) {
				parent.$.messager.confirm('Confirm', '确认是否要禁用此会议室!', function(r) {
					if (r) {
						$.post('${pageContext.request.contextPath}/RoomController/destroyRoom', {
							id : row.id
						}, function(result) {
							if (result.success) {
								$('#meetingConfigDateGrid').datagrid('reload'); // reload the user data
							} else {
								parent.$.messager.show({ // show error message
									title : 'Error',
									msg : result.errorMsg
								});
							}
						}, 'json');
					}
				});
			}
		}
	}
	function deleteMeetingRoom() {
		var row = $('#meetingConfigDateGrid').datagrid('getSelected');
		if (row) {
			parent.$.messager.confirm('Confirm', '确认是否要删除此会议室!', function(r) {
				if (r) {
					$.post('${pageContext.request.contextPath}/RoomController/deleteRoom', {
						id : row.id
					}, function(result) {
						if (result.success) {
							$('#meetingConfigDateGrid').datagrid('reload'); // reload the user data
						} else {
							$.messager.show({ // show error message
								title : 'Error',
								msg : result.errorMsg
							});
						}
					}, 'json');
				}
			});
		}
	}
</script>
<body>

	<table id="meetingConfigDateGrid" class="easyui-datagrid"
		style="width: 700px; height: 500px"></table>
	<div id="toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="newMeetingRoom()">新增</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editMeetingRoom()">修改</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="destroyMeetingRoom()">禁用</a><a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-no" plain="true" onclick="deleteMeetingRoom()">删除</a>
	</div>

	<div id="aeddialog" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px; top: 60px; left: 80px;"
		closed="true" buttons="#dlg-buttons">
		<div class="ftitle">会议室信息</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>会议室名称:</label> <input name="roomName" class="easyui-textbox"
					required="true">
			</div>
			<div class="fitem">
				<label>会议室楼层:</label> <input class="easyui-combobox" required="true"
					id="roomFloorCom" name="roomFloor"
					data-options="
						valueField: 'roomFloor',
						textField: 'value',
						data: [{
									roomFloor: '4楼',
									value: '4楼'
								},{
									roomFloor: '5楼',
									value: '5楼'
								},{
									roomFloor: '6楼',
									value: '6楼'
								}]
					" />
			</div>
			<div class="fitem">
				<label>会议室大小:</label> <input name="roomSize" class="easyui-textbox"
					required="true">
			</div>
			<div class="fitem">
				<label>描述:</label> <input name="roomDes" class="easyui-textbox">
			</div>
			<div class="fitem">
				<label>状态:</label> <input class="easyui-combobox" required="true"
					id="usableComb" name="usable"
					data-options="
						valueField: 'usable',
						textField: 'value',
						data: [{
									usable: '0',
									value: '正常'
								},{
									usable: '1',
									value: '停用'
								}]
					" />
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6"
			iconCls="icon-ok" onclick="saveMeetingRoom()" style="width: 90px">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#aeddialog').dialog('close')"
			style="width: 90px">取消</a>
	</div>

</body>
</html>
<style type="text/css">
#fm {
	margin: 0;
	padding: 10px 30px;
}

.ftitle {
	font-size: 14px;
	font-weight: bold;
	padding: 5px 0;
	margin-bottom: 10px;
	border-bottom: 1px solid #ccc;
}

.fitem {
	margin-bottom: 5px;
}

.fitem label {
	display: inline-block;
	width: 80px;
}

.fitem input {
	width: 160px;
}
</style>